// 创建axios 实例，将来对创建出来的实例，进行自定义配置
// 好处:不会污染原始的axios 实例
import axios from 'axios'
// 这里没有引入对应的css为什么它能正确的显示
import { showToast, showLoadingToast, closeToast } from 'vant'
import 'vant/es/toast/style'
import store from '@/store/'

const instance = axios.create({
  baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',
  timeout: 10000
})

// 自定义配置 -请求/响应拦截器
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 开启loading
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      duration: 0 // 设置提示不会在2秒后关闭，默认2秒
    })

    // 只要有token就携带
    const token = store.getters.token
    if (token) {
      config.headers['Access-Token'] = token
      config.headers.platform = 'H5'
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    if (response.data.status !== 200) {
      // 节流处理，模仿网络拥挤时的情况
      // Toast默认为单例模式，所以在调用另一个上一个会被覆盖，所以这里不用closeToast
      showToast(response.data.message)
      return Promise.reject(response.data.message)
    } else {
      closeToast()
    }
    return response.data
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

// 导出配置好的实例
export default instance
